<template>
	<jk-dialog
		:dialog-state="showDialog"
		:title="`修改锭数-${ruleForm.machineCode}`"
		width="1100px"
		:confirm-btn-loading="confirmBtnLoading"
		:show-content-loading="showLoading"
		@on-cancel="onVisibleChange(false)"
		@on-confirm="onConfirmBtn"
		@on-visible-change="onVisibleChange"
	>
		<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="140px" :show-message="false">
			<div class="flex-center">
				<el-tag effect="plain" size="large" class="margin-bottom-10" style="font-weight: 700;font-size: 22px;">
					<span class="el-icon-files item-gap"></span>
					<span>{{ ruleForm.machineCode }}</span>
				</el-tag>
			</div>
			<jk-divider-card>
				<el-row class="flex-start-center-wrap">
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="品种">
							<span class="read-only-2">{{ ruleForm.productName }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="批号">
							<span class="read-only-2">{{ ruleForm.batchCode }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="生产通知单">
							<span class="read-only-2">{{ ruleForm.prdNoticeCode }}</span>
						</el-form-item>
					</el-col>
					<!--<el-col :span="8">
						<el-form-item class="margin-bottom-0" label="输入颜色">
							<span class="read-only-2">{{ ruleForm.rovingColors ? ruleForm.rovingColors.map(x => x.name).join(',') : '' }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-0" label="输出颜色">
							<span class="read-only-2">{{ ruleForm.spunYarnColors ? ruleForm.spunYarnColors.map(x => x.name).join(',') : '' }}</span>
						</el-form-item>
					</el-col>-->
					<el-col :span="16">
						<el-form-item class="margin-bottom-0" label="机台锭数">
							<span class="read-only-2">{{ `总数: ${ruleForm.spinCount}, 已使用: ${ruleForm.usedSpinCount}, 剩余：${ruleForm.spinCount - ruleForm.usedSpinCount}` }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-0" label="区域">
							<span class="read-only-2">{{ ruleForm.workshopName }}</span>
						</el-form-item>
					</el-col>
				</el-row>
			</jk-divider-card>
			<jk-divider-card title="了机信息" :title-style="{ color: '#2b85e4' }" border-color="#2b85e4" icon="el-icon-bank-card" class="margin-top-30">
				<el-row class="flex-start-center-wrap">
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="了机时间" prop="endSystemTime">
							<el-date-picker v-model="ruleForm.endSystemTime" clearable type="datetime" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" placeholder="了机时间" @change="onCloseTimeChange" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="了机班次" prop="endScheduleShiftName">
							<jk-input v-model="ruleForm.endScheduleShiftName" readonly placeholder=""></jk-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="了机锭数">
							<span class="read-only-2">{{ ruleForm.endSpinCount }}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="flex-start-center-wrap">
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="了机产量表数" prop="endOutput">
							<jk-number-input v-model="ruleForm.endOutput" placeholder="了机产量表数" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="当前产量采集表数">
							<span class="read-only-2">{{ ruleForm.endSystemOutput }}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="flex-start-center-wrap">
					<el-col :span="8">
						<el-form-item class="margin-bottom-0" label="了机能耗表数" prop="endElectricEnergy">
							<jk-number-input v-model="ruleForm.endElectricEnergy" placeholder="了机能耗表数" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-0" label="当前能耗采集表数">
							<span class="read-only-2">{{ ruleForm.endSystemElectricEnergy }}</span>
						</el-form-item>
					</el-col>
				</el-row>
			</jk-divider-card>
			<jk-divider-card title="新开台信息" :title-style="{ color: '#19be6b' }" border-color="#19be6b" icon="el-icon-receiving" class="margin-top-30">
				<el-row class="flex-start-center-wrap">
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="开台时间" prop="startSystemTime">
							<el-date-picker v-model="ruleForm.startSystemTime" clearable type="datetime" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开台时间" @change="onOpenTimeChange" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="开台班次" prop="startScheduleShiftName">
							<jk-input v-model="ruleForm.startScheduleShiftName" readonly placeholder=""></jk-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="开台锭数">
							<jk-number-input v-model="ruleForm.openSpinCount" placeholder="开台锭数" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="flex-start-center-wrap">
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="开台产量表数" prop="startOutput1">
							<jk-number-input v-model="ruleForm.startOutput" placeholder="开台产量表数" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="当前产量采集表数">
							<el-input v-model="ruleForm.startSystemOutput" disabled placeholder="当前产量采集表数" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="系数" prop="outputRatio">
							<jk-number-input v-model="ruleForm.outputRatio" :max="1" placeholder="系数" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="flex-start-center-wrap">
					<el-col :span="8">
						<el-form-item class="margin-bottom-0" label="开台能耗表数" prop="startElectricEnergy1">
							<jk-number-input v-model="ruleForm.startElectricEnergy" placeholder="开台能耗表数" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-0" label="当前能耗采集表数">
							<el-input v-model="ruleForm.startSystemElectricEnergy" disabled placeholder="当前能耗采集表数" />
						</el-form-item>
					</el-col>
				</el-row>
			</jk-divider-card>
		</el-form>

	</jk-dialog>
</template>

<script>
    import { clearRedundancyKey, formatTime } from '../../../../utils/jk/jk-tool';
    import { workforcemanagementScheduleShiftByTime } from '../../../../api/schedule/empReplacePost';
    import {
        productionPrdNoticeMachineChangeGetMachineData,
        productionPrdNoticeMachineCloseCloseOpen
    } from '../../../../api/production/xsOpen';
    import { productionPrdNoticeMachineChangePage } from '../../../../api/production/xsRenovateOrder';
    export default {
        props: {
            /**
             * @操作类型：
             *  1、开台
             *  2、完成翻改并开台;
             *
             * */
            operationType: {
                type: Number,
                default: 1
            },
            dialogState: {
                type: Boolean,
                default: false
            },
            selectMachineItem: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data() {
            return {
                showLoading: false,
                activeName: '1',
                showDialog: false,
                confirmBtnLoading: false,
                ruleForm: {
                    'outputRatio': 1,
                    'lastEndElectricEnergy': null,
                    'lastEndOutput': null,
                    'openSpinCount': null,
                    'prdNoticeMachineChangeId': null,
                    'startElectricEnergy': null,
                    'startOutput': null,
                    'startScheduleShiftId': null,
                    'startScheduleShiftName': '',
                    'startSpinNumber': null,
                    'startSystemElectricEnergy': null,
                    'startSystemOutput': null,
                    'startSystemTime': '',
                    // 了机信息
                    'endSpinCount': '',
                    'endElectricEnergy': null,
                    'endOutput': null,
                    'endScheduleShiftId': null,
                    'endScheduleShiftName': '',
                    'endSystemElectricEnergy': null,
                    'endSystemOutput': null,
                    'endSystemTime': '',
                    'spinCount': 0, // 机台的设定锭数
                    'usedSpinCount': 0 // 已经开台的锭数
                },
                rules: {
                    startScheduleShiftName: [{ required: true, trigger: 'change' }],
                    openSpinCount: [{ required: true, trigger: 'change' }],
                    startSystemTime: [{ required: true, trigger: 'change' }],
                    startOutput: [{ required: true, trigger: 'change' }],
                    startElectricEnergy: [{ required: true, trigger: 'change' }],
                    // 了机
                    endSystemTime: [{ required: true, trigger: 'change' }],
                    endScheduleShiftName: [{ required: true, trigger: 'change' }],
                    endOutput: [{ required: true, trigger: 'change' }],
                    endElectricEnergy: [{ required: true, trigger: 'change' }]
                }
            };
        },
        methods: {
            onJump() {
                this.$toMainRouter({
                    name: 'XsClose',
                    query: {
                        machineCode: this.ruleForm.machineCode
                    }
                });
            },
            onConfirmBtn() {
                this.$refs['ruleForm'].validate(valid => {
                    if (valid) {
                        this.saveRequest();
                    } else {
                        this.$tipsBar(this, 'validator');
                    }
                });
            },
            saveRequest() {
                this.confirmBtnLoading = true;
                const params = {
                    'outputRatio': this.ruleForm.outputRatio,
                    'lastEndElectricEnergy': this.ruleForm.lastEndElectricEnergy,
                    'lastEndOutput': this.ruleForm.lastEndOutput,
                    'openSpinCount': this.ruleForm.openSpinCount,
                    'prdNoticeMachineChangeId': this.ruleForm.prdNoticeMachineChangeId,
                    'startElectricEnergy': this.ruleForm.startElectricEnergy,
                    'startOutput': this.ruleForm.startOutput,
                    'startScheduleShiftId': this.ruleForm.startScheduleShiftId,
                    'startSpinNumber': this.ruleForm.startSpinNumber,
                    'startSystemElectricEnergy': this.ruleForm.startSystemElectricEnergy,
                    'startSystemOutput': this.ruleForm.startSystemOutput,
                    'startSystemTime': this.ruleForm.startSystemTime,
                    // 了机信息
                    'endElectricEnergy': this.ruleForm.endElectricEnergy,
                    'endOutput': this.ruleForm.endOutput,
                    'endScheduleShiftId': this.ruleForm.endScheduleShiftId,
                    'endSystemElectricEnergy': this.ruleForm.endSystemElectricEnergy,
                    'endSystemOutput': this.ruleForm.endSystemOutput,
                    'endSystemTime': this.ruleForm.endSystemTime
                };
                productionPrdNoticeMachineCloseCloseOpen(params).then(res => {
                    this.confirmBtnLoading = false;
                    if (res.data.status === 200) {
                        this.$emit('on-confirm');
                    }
                });
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
            },
            onCloseTimeChange() {
                this.$set(this.ruleForm, 'endScheduleShiftId', null);
                this.$set(this.ruleForm, 'endScheduleShiftName', '');
                this.getScheduleShiftForTimeRequest(2);
                this.getGatherMachineDataRequest(2);
            },
            onOpenTimeChange() {
                this.$set(this.ruleForm, 'startScheduleShiftId', null);
                this.$set(this.ruleForm, 'startScheduleShiftName', '');
                this.getScheduleShiftForTimeRequest(1);
                this.getGatherMachineDataRequest(1);
            },
            getScheduleShiftForTimeRequest(type = 1) {
                // type:1 开台时间; type: 2 了机时间
                const dateTime = type === 1 ? this.ruleForm.startSystemTime : this.ruleForm.endSystemTime;
                if (this.ruleForm.workshopId && dateTime) {
                    return workforcemanagementScheduleShiftByTime({
                        startTime: dateTime,
                        workshopId: this.ruleForm.workshopId
                    }).then(res => {
                        if (res.data.status === 200) {
                            const resData = res.data.res;
                            if (type === 1) {
                                this.$set(this.ruleForm, 'startScheduleShiftId', resData.shiftId);
                                this.$set(this.ruleForm, 'startScheduleShiftName', resData.shiftName);
                            } else {
                                this.$set(this.ruleForm, 'endScheduleShiftId', resData.shiftId);
                                this.$set(this.ruleForm, 'endScheduleShiftName', resData.shiftName);
                            }
                        }
                    });
                }
            },
            // 获取指定机台采集的仪表数据
            getGatherMachineDataRequest(type = 1) {
                const dateTime = type === 1 ? this.ruleForm.startSystemTime : this.ruleForm.endSystemTime;
                if (this.ruleForm.machineId && this.ruleForm.machineCode) {
                    return productionPrdNoticeMachineChangeGetMachineData({
                        machineId: this.ruleForm.machineId,
                        machineCode: this.ruleForm.machineCode,
                        selectDateTime: dateTime
                    }).then(res => {
                        if (res.data.status === 200) {
                            if (type === 1) {
                                // 开台能耗表数，默认等于采集到的实时能耗
                                this.$set(this.ruleForm, 'startElectricEnergy', res.data.res.currentElectricEnergy);
                                this.$set(this.ruleForm, 'startSystemElectricEnergy', res.data.res.currentElectricEnergy);
                                // 开台产量表数，默认等于采集到的实时产量
                                this.$set(this.ruleForm, 'startOutput', res.data.res.currentOutput);
                                this.$set(this.ruleForm, 'startSystemOutput', res.data.res.currentOutput);
                                // 上次的产量和能耗
                                this.$set(this.ruleForm, 'lastEndOutput', res.data.res.lastEndOutput);
                                this.$set(this.ruleForm, 'lastEndElectricEnergy', res.data.res.lastEndElectricEnergy);

                                // 新开台锭数 = 总锭数 - 已使用的锭数 - 当前要了机的锭数
                                this.$set(this.ruleForm, 'openSpinCount', res.data.res.spinCount - res.data.res.usedSpinCount + this.ruleForm.endSpinCount);
                            } else {
                                this.$set(this.ruleForm, 'reportElectricEnergy', res.data.res.reportElectricEnergy);
                                this.$set(this.ruleForm, 'reportOutput', res.data.res.reportOutput);
                                this.$set(this.ruleForm, 'reportQty', res.data.res.reportQty);
                                // 开台能耗表数，默认等于采集到的实时能耗
                                this.$set(this.ruleForm, 'endElectricEnergy', res.data.res.currentElectricEnergy);
                                this.$set(this.ruleForm, 'endSystemElectricEnergy', res.data.res.currentElectricEnergy);
                                // 开台产量表数，默认等于采集到的实时产量
                                this.$set(this.ruleForm, 'endOutput', res.data.res.currentOutput);
                                this.$set(this.ruleForm, 'endSystemOutput', res.data.res.currentOutput);
                            }
                            this.$set(this.ruleForm, 'usedSpinCount', res.data.res.usedSpinCount);
                            this.$set(this.ruleForm, 'spinCount', res.data.res.spinCount);
                        }
                    });
                }
            },
            async getDependentData() {
                this.showLoading = true;
                await this.getScheduleShiftForTimeRequest(1);
                await this.getScheduleShiftForTimeRequest(2);
                await this.getGatherMachineDataRequest(1);
                await this.getGatherMachineDataRequest(2);
                this.showLoading = false;
            }
        },
        watch: {
            dialogState(newVal) {
                this.ruleForm = clearRedundancyKey(this.selectMachineItem);
                this.$set(this.ruleForm, 'spinCount', 0);
                this.$set(this.ruleForm, 'usedSpinCount', 0);
                this.$set(this.ruleForm, 'endSpinCount', this.selectMachineItem.openSpinCount);
                this.$set(this.ruleForm, 'prdNoticeMachineChangeId', this.selectMachineItem.id);
                this.$delete(this.ruleForm, 'id');
                this.$set(this.ruleForm, 'startSystemTime', formatTime(Date.now()));
                this.$set(this.ruleForm, 'endSystemTime', formatTime(Date.now()));
                this.showDialog = newVal;
                if (newVal) {
                    this.getDependentData();
                }
            }
        }
    };
</script>
